<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>代码生成工具</title>

	<link rel="stylesheet" href="layui/css/layui.css" media="all">

	<script src="https://code.jquery.com/jquery-2.2.4.min.js"
		integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
	<script src="layui/layui.js"></script>

	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/vue@next"></script>
	<style>
		.layui-row {
			margin-top: 30px;
		}

		.form-label {
			width: 100px;
			height: 30px;
			line-height: 30px;
			display: inline-block;
			text-align: right;
		}

		.form-input,
		select {
			border-radius: 2px;
			height: 30px;
			width: 200px;
			margin: 0px 10px;
			background-color: #fff;
			border: 1px solid #eee;
			text-indent: 1em;
		}

		.form-btn {
			width: 120px;
			text-align: center;
			height: 30px;
			line-height: 30px;
			background-color: #5FB878;
			color: white;
			border: 0px solid #5FB878;
			cursor: pointer;
			margin-left: 20px;
		}

		.addTableInfo {
			display: none;
			padding: 20px;
		}
	</style>
</head>

<body>

	<div id="app" class="layui-container" style="border: 1px solid #5FB878;margin-top: 50px;">

		<div class="layui-row">
			<label class="form-label">数据库名</label>
			<input type="text" v-model="db.dataBaseName" class="form-input">

			<label class="form-label">数据库账号</label>
			<input type="text" v-model="db.username" class="form-input">

			<label class="form-label">数据库密码</label>
			<input type="text" v-model="db.password" class="form-input">

			<input type="button" class="form-btn" @click="testConnect" value="测试链接">
		</div>

		<div class="layui-row">
			<div class="layui-col-md12">
				<label class="form-label">数据库表名</label>
				<input type="text" name="title" class="form-input">
				<input type="button" class="form-btn" value="检索" @click="searchTable">

				<input type="button" class="form-btn" @click="addTable" value="添加">

				<input type="button" class="form-btn" @click="delTable" value="删除">

				<label style="margin-left: 30px;color: #5FB878;font-size: 17px;">{{msg}}</label>
			</div>
		</div>

		<div class="layui-row">

			<table class="layui-table">
				<colgroup>
					<col width="100">
					<col width="200">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>表名</th>
						<th>包名</th>
						<th>模块名</th>
						<th>类名</th>
						<th>表描述</th>
						<th>作者姓名</th>
						<th>表前缀移除</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(cg,index) in code" :key="index">
						<td>{{cg.tableName}}</td>
						<td>{{cg.packageName}}</td>
						<td>{{cg.busName}}</td>
						<td>{{cg.className}}</td>
						<td>{{cg.tableComment}}</td>
						<td>{{cg.authorName}}</td>
						<td>{{cg.tablePrefix}}</td>
						<td>
							<a href="javascript:;" :value="cg.id">编辑</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="addTableInfo">
			<div>
				<label class="form-label">选择表名</label>
				<select @change="selectTable($event)" v-model="codeGenerate.tableName">
					<option v-for="(tb,index) in tab " :value="tb.name" :key="index"> {{tb.remark}}</option>
				</select>

				<label class="form-label">移除前缀</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="radio" value="1" v-model="codeGenerate.tablePrefix" name="sex" id="nan" />
				<lable for="nan">是</lable>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

				<input type="radio" value="0" v-model="codeGenerate.tablePrefix" name="sex" id="nv" />
				<lable for="nv">否</lable>
			</div>

			<div style="margin-top: 20px;">
				<label class="form-label">类名</label>
				<input type="text" v-model="codeGenerate.className" class="form-input">

				<label class="form-label">表描述</label>
				<input type="text" v-model="codeGenerate.tableComment" class="form-input">

			</div>

			<div style="margin-top: 20px;">

				<label class="form-label">作者姓名</label>
				<input type="text" v-model="codeGenerate.authorName" class="form-input">

				<label class="form-label">包名</label>
				<input type="text" v-model="codeGenerate.packageName" class="form-input">
			</div>

			<div style="margin-top: 20px;">

				<label class="form-label">模块名</label>
				<input type="text" v-model="codeGenerate.busName" class="form-input">

				<input type="buttion" class="form-btn" @click="saveTableInfo" value="保存">
			</div>
		</div>
	</div>


	<script>
		const vm = Vue.createApp({	// 创建一个Vue实例
			data() {
				return {
					db: {
						dataBaseName: 'lunwen',
						username: 'root',
						password: 'root'
					},
					tab: {
						name: '',
						remark: ''
					},
					codeGenerate: {
						authorName: "",
						className: "",
						tablePrefix: 1,
						tableName: "",
						packageName: "",
						busName: "",
						tableComment: "",
					},
					code: [
						{
							authorName: "",
							className: "",
							tablePrefix: 1,
							tableName: "",
							packageName: "",
							busName: "",
							tableComment: "",
						}
					],
					msg: "数据库未连接,请点击测试链接按钮...",
				}
			},
			methods: {
				testConnect() {
					if (this.db.dataBaseName == undefined || this.db.dataBaseName.length == 0) {
						layer.msg("数据库名称不能够为空...", {icon: 2, time: 3000});
						return false;
					}
					if (this.db.username == undefined || this.db.username.length == 0) {
						layer.msg("数据库账号不能够为空...", {icon: 2, time: 3000});
						return false;
					}
					if (this.db.password == undefined || this.db.password.length == 0) {
						layer.msg("数据库密码不能够为空...", {icon: 2, time: 3000});
						return false;
					}
					// 发送数据链接请求
					axios.post("/connect", this.db).then(res => {
						if (res.data.code == 200) {
							layer.msg("数据库测试链接成功...", {icon: 1, time: 1500});
							this.msg = "数据库链接成功...";
							initData(this);
						} else {
							layer.msg(res.data.msg, {icon: 2, time: 3000});
						}
					}).catch(res => {
						layer.msg(res.data.msg, {icon: 2, time: 3000});
					});
				},
				addTable() {
					// 查询数据表信息
					axios.post("/tablesInfo", this.db).then(res => {
						if (res.data.code == 200) {
							this.tab = res.data.data;
						} else {
							layer.msg(res.data.msg, {icon: 2, time: 3000});
						}
					});
					// 弹出层
					layer.open({
						title: '添加表信息',
						type: 1,
						shade: 0.2,
						maxmin: true,
						shadeClose: true,
						area: ['50%', '60%'],
						content: $('.addTableInfo'),
						end: function () { //子页面销毁时回调的方法
							// 刷新添加好后的表信息
							initData(this);
						}
					});
				},
				delTable() {
					console.log("删除表信息....");
				},
				searchTable() {
					console.log("检索配置好的表信息...");
				},
				selectTable(e) {
					// 通过表名查询其他信息
					console.log(e.target.value);
					for (let i = 0; i < this.tab.length; i++) {
						if (this.tab[i].name == e.target.value) {
							this.codeGenerate.tableComment = this.tab[i].remark;
							this.codeGenerate.className = this.tab[i].name;
							return;
						}
					}
				},
				saveTableInfo() {
					axios.post("/saveCodeGenerate", this.codeGenerate).then(res => {
						if (res.data.code == 200) {
							layer.msg(res.data.msg, {icon: 1, time: 2000});
						} else {
							layer.msg(res.data.msg, {icon: 2, time: 3000});
						}
					});
				}
			},
			created() {
				initData(this);
			}
		}).mount("#app");	// 模板挂载的位置

		function initData(_this) {

			axios.post("/list", null).then(res => {
				console.log(res.data);
				if (res.data.code == 200) {
					_this.code = res.data.data;
				} else {
					layer.msg("请点击测试链接...");
				}
			}).catch(res => {
				layer.msg(res.data.msg, {icon: 1, time: 3000});
			});
		}

	</script>
</body>

</html>